{% extends "base.html" %}

{% load static %}

{% block content %}
    <div class="cart_list">
        <div class="cart_top">我的购物车</div>
        <!-- 完善form表单action属性，需跳转到确定订单页面 -->
        <form action="/Buyer/enter_order/" method="post">
            {% csrf_token %}
            <div class="cart_listbox">
                <table width="100%" cellpadding="0" cellspacing="0" border='0px'>
                    <thead>
                    <tr>
                        <th width='10%'>
                            <input type="checkbox" id="all"
                                   style="margin-top: 20px; margin-left: 10px;width: 24px; height: 24px;">
                        </th>
                        <th width='10%'>商品名称</th>
                        <th width='20%'>商品缩略图</th>
                        <th width='20%'>商品单价</th>
                        <th width='20%'>商品数量</th>
                        <th width='20%'>商品小计</th>
                        <th width='10%'>操作</th>
                    </tr>
                    </thead>
                    <tbody id="j_tb">
                    {% if new_buycar_list %}
                        {% for buycar_obj_dict in new_buycar_list %}
                            <tr>
                                <td>
                                    <!-- 完善input标签的name和value属性
{#                                        参考：name="name_{{ buycar_obj_dict.buycar_obj.id }}"#}
{#                                               value="{{ buycar_obj_dict.buycar_obj.id }}"#}

                                    -->
                                    <input name="name_{{ buycar_obj_dict.buycar_obj.id }}"
                                           value="{{ buycar_obj_dict.buycar_obj.id }}"
                                           type="checkbox"
                                           style="margin-left: 60px; width: 24px; height: 24px;">
                                </td>
                                {#商品名称#}
                                <!-- 须传入商品名称 -->
                                <td><a href="#">{{ buycar_obj_dict.buycar_obj.goods_name }}</a></td>
                                {#商品图片#}
                                <!-- 须传入商品缩略图url -->
                                <td>
                                    <a href="#"><img src="{% static buycar_obj_dict.buycar_obj.goods_picture %}"/></a>
                                </td>
                                {#商品单价#}
                                <!-- 须传入商品单价 -->
                                <td>￥{{ buycar_obj_dict.buycar_obj.goods_price }}元</td>
                                {#商品数量#}
                                <td><input type="submit" name="-" value="-" class="btn1" formaction=""/>
                                    <!-- 须传入商品数量，完善input标签的value属性 -->
                                    <input type="text" value="{{ buycar_obj_dict.buycar_obj.goods_num }}" name="count"
                                           class="text1"/>
                                    <input type="submit" name="+" value="+" class="btn1" formaction=""/></td>
                                <!-- 须传入商品小计 -->
                                <td>￥{{ buycar_obj_dict.goods_xiaoji }}</td>
                                <td>
                                    {% comment %}购物车id{% endcomment %}
                                    <!-- 完善a标签的href属性-->
                                    <a href="/Buyer/delete_buycar_goods/?id={{ buycar_obj_dict.buycar_obj.id }}">删除</a>
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="6" style="text-align: center;">购物车空空如也~~，请快去购物吧！</td>
                        </tr>
                    {% endif %}
                    </tbody>
                </table>

            </div>
            <div class="shouhuo">
                <div class="shouhuo_top">收货信息</div>
                <label>收货地址:</label>
                <select name="address" id="" class="input">
                    {% for address_obj in address_obj_list %}
                        <!-- 完善value属性，需传入收货人id。option标签中需传入收货人姓名，收货人地址 -->
                        <option value="{{ address_obj.id }}" class="input">{{ address_obj.receiver }}---{{ address_obj.address }}</option>
                    {% endfor %}
                </select>
                <!-- 完善a标签href属性，需跳转到收货地址添加页面 -->
                <a href="/Buyer/address_list/"><span style="color: chartreuse; font-size: 50px ">+</span> </a>

                <label>支付方式:</label>
                <select name="pay_Method" id="" class="input">
                    <option selected value="zfb" class="input">支付宝</option>
                    <option value="wx" class="input">微信</option>
                    <option value="bank" class="input">银行卡</option>
                </select>
            </div>
            <div class="goon">
                <div class="clearcart">
                    <!-- 完善a标签href属性 -->
                    <a href="/Buyer/clear_buycar/" class="btn">清空购物车</a>
                </div>
                <div class="totalprice">
                    总计:{{ total_price }}
                </div>

                <div class="order">
                    <input type="submit" value="立即下单" class="btn"/>
                </div>

            </div>
        </form>
    </div>
    {#    复选框 的 js #}
    <script>
        function check(selector) {
            return document.querySelector(selector)//捕获的是一个数组
        }

        check("#all").onclick = function () {
            var input = check('#j_tb').getElementsByTagName('input');
            for (var i = 0; i < input.length; i++) {
                input[i].checked = this.checked //this 执行函数的对象 checked 属性 返回当中选中的状态，也可以赋值使用
            }
        };
        var inputs = check('#j_tb').getElementsByTagName('input');
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].onclick = function () {
                var flag = true;
                /*flag = false 底下的复选框全被选中*/
                for (var j = 0; j < inputs.length; j++) {
                    if (!inputs[j].checked) {
                        flag = false;
                    }
                }
                check('#all').checked = flag;
            }
        }

    </script>

{% endblock %}